<template>
  <!--线下付款页面-->
  <div>
    <div class="download">
    <wv-panel>
      <div class="cata" v-for="item in orderDetailList">
        <wv-media-box :thumb="item.coverImg | imgPathFilter" :title="item.goodsName" :description="item.unitPrice+'元'" to="/"></wv-media-box>
        <span class="num">×{{item.buyNum}}</span>
      </div>
    </wv-panel>
    <div class="divider"></div>
    <wv-group>
      <wv-cell title="总计" :value="order.totalPrice+'元'" class="total"/>
    </wv-group>
    <div class="divider"></div>
    <div class="detail">
      <ul>
        <li>请将此码出示给工作人员进行收款确认，确认完成后可点击“确定”按钮</li>
        <li style="margin-top: 20px"><img :src="imageBase64QRCode" alt="" width="120"></li>
        <li>{{order.orderCode}}</li>
      </ul>
    </div>
    </div>
    <p class="offer" @click="goOrderPayunderCheck(order,orderDetailList)">确定</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getOrderDetail, orderPayunderCheck} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'downloadoffer',
    props: {},
    data() {
      return {
        src: require('../../../assets/smalljinka.png'),
        erweimasrc: require('../../../assets/erweima.png'),
        orderDetailList: [],
        order: {},
        imageBase64QRCode: ''
      };
    },
    methods: {
      getOrderDetailData(params) {
        getOrderDetail(params).then(res => {
          if (res.code == 100) {
            this.orderDetailList = res.object.orderDetailList;
            let order = res.object.order;
            let orderCode = this.$myUtils.replaceStr(order.orderCode);
            order['orderCode'] = orderCode;
            this.order = order;
            this.imageBase64QRCode = res.object.imageBase64QRCode;
          }
        })
      },
      goOrderPayunderCheck(order,orderDetailList) {
        let orderDetailInfo=JSON.stringify(orderDetailList);
        orderPayunderCheck({orderId: order.orderId}).then(res => {
          console.log(res);
          if(res.code==100){
              this.$router.push({path:'downloadofferpayresult',query:{orderId:order.orderId,orderDetailInfo:orderDetailInfo}})
          }else{
            Toast.text(res.info);
          }
        })
      }
    },
    created() {
      let orderId = this.$route.query.orderId;
      this.getOrderDetailData({orderId: orderId});
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  download {
    padding-bottom: 60px;
  }
  .divider {
    height: 10px;
    background-color: #eee;
  }

  .cata {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    .num {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 15px;
      color: #666;
    }
  }

  .detail {
    border: 1px solid #ddd;
    padding: 10px;
    width: 80%;
    margin: 10px auto;
    ul {
      list-style: none;
      li:first-child {
        color: #666;
        line-height: 25px;
        border-bottom: 1px solid #ddd;
        padding: 10px;
        text-align: left;
      }
      li:last-child {
        color: #111;
      }
    }
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }

</style>

